<template>
  <div class="app-container">
    <div class="filter-container add1">
      <el-form style>
        <el-form-item>
          <!-- 按钮级别的控制,使用hasPerm来判断是否应该有添加这个按钮 -->
          <el-button
            type="primary"
            icon="plus"
            @click="showCommitteeCreate"
            v-if="hasPerm('committee:add')"
          >添加</el-button>
          <!-- 下载模板 -->
          <el-button
            @click="exportExcel"
            type="primary"
            icon="plus"
            v-if="hasPerm('committee:add')"
          >下载导入模板</el-button>
          <!-- 使用后端导入 -->
          <el-button type="primary" icon="plus" v-if="hasPerm('committee:add')" size="small">
            导入
            <input
              type="file"
              id="btn"
              ref="clearFile"
              name="file"
              @change="importf(this)"
              accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
            >
          </el-button>
          <el-button
            @click="exportExcelOpertor"
            type="primary"
            icon="plus"
            v-if="hasPerm('committee:add')"
          >导出</el-button>
          <el-button type="danger" @click="delCommitteeSelect">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="searchWord">
      <el-input v-model="searchCommittee" placeholder="请输入搜索内容" @input="committeeGeneralFun()"></el-input>
    </div>

    <br>
    <el-table
      class="tabless"
      :data="committeeList"
      v-loading.body="committeeListLoading"
      element-loading-text="拼命加载中"
      border
      fit
      highlight-current-row
      :row-class-name="tableRowClassName"
      @selection-change="handleCommitteeSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column align="center" label="序号" width="80">
        <template slot-scope="scope">
          <span v-text="getIndex(scope.$index)"></span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="committee_name" label="委员会名称" style="width: 60px;"></el-table-column>
      <el-table-column align="center" prop="committee_desc" label="委员会描述" style="width: 170px;"></el-table-column>

      <el-table-column align="center" label="管理" width="300" v-if="hasPerm('committee:update')">
        <template slot-scope="scope">
          <el-button type="primary" icon="edit" @click="showCommitteeUpdate(scope.$index)">修改</el-button>
          <el-button type="danger" @click="handleCommitteeDelete(scope.$index, scope.row)">删除</el-button>
          <el-button type="primary" @click="showMember(scope.$index, scope.row)">成员</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteCommitteeRow">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 批量删除提示框 -->
    <el-dialog title="提示" :visible.sync="delVisibleByBatch" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定批量删除？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisibleByBatch = false">取 消</el-button>
        <el-button type="primary" @click="delAllCommittee">确 定</el-button>
      </span>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="committeeListQuery.pageNum"
      :page-size="committeeListQuery.pageRow"
      :total="committeeTotalCount"
      :page-sizes="[3, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      class="pagination"
    ></el-pagination>

    <!-- 委员会详情 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogVisible">
      <el-form
        class="small-space"
        :model="tempCommittee"
        label-position="left"
        label-width="100px"
        style="width: 500px; margin-left:50px;">
        <el-form-item label="委员会名称" v-if="dialogStatus=='create' | dialogStatus=='update'">
          <el-input type="text" v-model="tempCommittee.committee_name"></el-input>
        </el-form-item>
        <el-form-item label="委员会描述" v-if="dialogStatus=='create' | dialogStatus=='update'">
          <el-input type="textarea" v-model="tempCommittee.committee_desc"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="success" v-if="dialogStatus=='create'" @click="createCommittee">创 建</el-button>
        <el-button type="primary" v-if="dialogStatus=='update'" @click="updateCommittee">修 改</el-button>
      </div>
    </el-dialog>

    <!-- 委员会成员列表 -->
    <el-dialog :title="currentCommitteeName + ' 的委员会成员'" :visible.sync="dialogCommitteeMemberListVisible">
      <div>
        <el-button type="primary" icon="plus" @click="showCommitteeMemberCreate" v-if="hasPerm('committee_member:add')">新增委员会成员</el-button>
      </div>
      <div class="filter-container add1">
      </div>
      <br>
      <div class="searchWord">
        <el-input v-model="searchCommitteeMember" placeholder="请输入搜索内容" @input="committeeMemberGeneralFun()"></el-input>
      </div>
      <br>
      <el-table :data="committeeMemberList" border stripe>
        <el-table-column align="center" prop="member_name" label="姓名" style="width: 30px;"></el-table-column>
        <el-table-column align="center" prop="member_org" label="单位" style="width: 30px;"></el-table-column>
        <el-table-column align="center" prop="certificate_id" label="身份证号" style="width: 50px;"></el-table-column>
        <el-table-column align="center" label="管理" width="100">
          <template slot-scope="scope">
            <!-- 删除 -->
            <el-button type="danger" @click="handleCommitteeMemberDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogCommitteeMemberListVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="delMemberFromCommitteeVisible" width="300px" center>
      <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteMemberFromCommittee">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 委员会成员详情 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogCommitteeMemberVisible">
      <el-form
        class="small-space"
        :model="tempCommitteeMember"
        label-position="left"
        label-width="100px"
        style="width: 500px; margin-left:50px;">
        <el-form-item>
        <el-checkbox v-model="tempCommitteeMember.is_staff" @change="handleIsStaffChanged">是否本公司员工</el-checkbox>
        </el-form-item>
        <el-form-item label="成员姓名" required v-if="(dialogStatus=='create' | dialogStatus=='update') & !tempCommitteeMember.is_staff">
          
            <el-autocomplete class="inline-input" placeholder="已有成员请从列表中选择"
              v-model="tempCommitteeMember.member_name" :fetch-suggestions="committeeMemberNameQuerySearch" 
              @select="handleCommitteeMemberSelect" @keyup.native = "handleKeyup" style="width : 100%"></el-autocomplete>
          
        </el-form-item>
        <el-form-item required label="员工姓名" v-if="(dialogStatus=='create' | dialogStatus=='update') & tempCommitteeMember.is_staff">
          
            <el-autocomplete class="inline-input" placeholder="请搜索并选择" 
              v-model="tempCommitteeMember.member_name" :fetch-suggestions="staffNameQuerySearch" 
              @select="handleStaffSelect" @keyup.native = "handleKeyup" style="width : 100%"></el-autocomplete>
          
        </el-form-item>
        <el-form-item label="所属单位" required v-if="dialogStatus=='create' | dialogStatus=='update'">
          <el-input type="text" width="50%" v-model="tempCommitteeMember.member_org" :disabled="this.committeeMemberOrgDisabled"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" required v-if="dialogStatus=='create' | dialogStatus=='update'">
          <el-input type="text" width="50%"  v-model="tempCommitteeMember.certificate_id" :disabled="this.committeeMemberCertifyDisabled"></el-input>
        </el-form-item>
        <el-form-item>
        <el-checkbox v-model="tempCommitteeMember.is_chairman" :disabled="this.committeeMemberChairmanDisabled">是否委员会主席</el-checkbox>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCommitteeMemberVisible = false">取 消</el-button>
        <el-button type="success" v-if="dialogStatus=='create'" @click="createCommitteeMember">创 建</el-button>
        <el-button type="primary" v-if="dialogStatus=='update'" @click="updateCommitteeMember">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      committeeTotalCount: 0, //分页组件--数据总条数
      committeeList: [], //表格的数据
      staffList: [], //员工数据
      querySearchStaffList: [], //用于自动匹配的员工数据
      committeeMemberList: [], //表格的数据
      allCommitteeMemberList: [], //全部成员数据
      querySearchCommitteeMemberList: [], //用于自动匹配的成员数据
      committeeListLoading: false, //数据加载等待动画
      committeeMemberListLoading: false, //数据加载等待动画
      committeeListQuery: {
        pageNum: 1, //页码
        pageRow: 5, //每页条数
        value: ""
      },
      committeeMemberListQuery: {
        committee_id: null,
        pageNum: 1, //页码
        pageRow: 10, //每页条数
        value: ""
      },
      // 为textMap中的属性,指定标题头
      dialogStatus: "create",
      dialogVisible: false,
      delVisible: false, //删除提示弹框的状态
      delVisibleByBatch: false, //批量删除提示弹框的状态
      delMemberFromCommitteeVisible: false, //删除提示弹框的状态
      dialogCommitteeMemberListVisible: false, //成员列表弹框的状态
      dialogCommitteeMemberVisible: false, //添加成员弹框的状态
      committeeMemberOrgDisabled: false, //成员单位可否编辑
      committeeMemberCertifyDisabled: false, //成员身份证号可否编辑
      committeeMemberChairmanDisabled: false, //成员是否主席可否编辑
      textMap: {
        update: "编辑",
        create: "创建",
        committeeMember: "委员会成员",
      },
      tempCommittee: {
        committee_id: "",
        committee_name: "",
        committee_desc: ""
      },
      tempCommitteeMember: {
        committee_member_id: "",
        committee_id: "",
        member_name: "",
        member_org: "",
        certificate_id: "",
        is_staff: "",
        is_chairman: "",
        staff_id: "",
      },
      currentCommitteeName: "",
      currentCommitteeId: "",
      delCommitteeIndex: -1, 
      committeeMultipleSelection: [], 
      searchCommittee: "",
      delCommitteeMemberIndex: -1, 
      committeeMemberMultipleSelection: [], 
      searchCommitteeMember: "",
      // 记录导出得时候跳页的之前的页数
      temp_page: 3,
    };
  },
  computed: {},
  created() {
    this.getCommitteeList();
  },
  methods: {
    clearFile() {
      this.$refs.clearFile.value = ""; // 清空file文件
    },
    // 导入
    importf(obj) {
      let _this = this;
      let inputDOM = this.$refs.inputer; // 通过DOM取文件数据
      this.file = event.currentTarget.files[0];
      var rABS = false; //是否将文件读取为二进制字符串
      var f = this.file;
      var reader = new FileReader();
      FileReader.prototype.readAsBinaryString = function(f) {
        var binary = "";
        var rABS = false; //是否将文件读取为二进制字符串
        var pt = this;
        var wb; //读取完成的数据
        var outdata;
        var reader = new FileReader();
        reader.onload = function(e) {
          var bytes = new Uint8Array(reader.result);
          var length = bytes.byteLength;
          for (var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
          }
          var XLSX = require("xlsx");
          if (rABS) {
            wb = XLSX.read(btoa(fixdata(binary)), {
              //手动转化
              type: "base64"
            });
          } else {
            wb = XLSX.read(binary, {
              type: "binary"
            });
          }
          // outdata就是你想要的东西 excel导入的数据
          outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
          // excel 数据再处理
          let arr = [];
          outdata.map(v => {
            let obj = {};
            obj.committee_name = v.委员会名称;
            obj.committee_desc = v.委员会描述;
            obj.committee_id = "";
            arr.push(obj);
            _this.tempCommittee = obj;
            _this.createCommittee();
          });
          _this.accountList = [...arr];
        };
        alert("上传完毕！");
        _this.clearFile();
        reader.readAsArrayBuffer(f);
      };
      if (rABS) {
        reader.readAsArrayBuffer(f);
      } else {
        reader.readAsBinaryString(f);
      }
    },

    // 导入结束
    exportExcelOpertor() {
      this.temp_page = this.committeeListQuery.pageRow;
      this.handleSizeChange(this.committeeTotalCount);
      window.setTimeout(this.exportExcel, 50);
      window.setTimeout(this.delayTime, 200);
    },
    delayTime() {
      this.committeeListQuery.pageRow = this.temp_page;
      this.committeeGeneralFun();
    },
    exportExcel() {
      // 设置当前日期
      let time = new Date();
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      let name = year + "" + month + "" + day;
      this.$nextTick(function() {
        let wb = XLSX.utils.table_to_book(document.querySelector(".tabless"));
        /* get binary string as output */
        let wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            name + ".xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
      });
    },

    //单行删除
    handleCommitteeDelete(index, row) {
      this.delCommitteeIndex = index;
      this.delVisible = true;
    },
    handleCommitteeMemberDelete(index, row) {
      this.delCommitteeMemberIndex = index;
      this.delMemberFromCommitteeVisible = true;
    },
    // 当批量删除的时候,如果要是没有选中,弹出提醒
    delWarnInfo() {
      this.$message("请选择您要删除的数据");
    },
    //批量删除
    delAllCommittee() {
      var lengths = this.committeeMultipleSelection.length;

      for (let i = 0; i < lengths; i++) {
        this.api({
          url: "/committee/deleteCommittee",
          method: "post",
          data: this.committeeMultipleSelection[i]
        })
          .then(() => {
            this.committeeGeneralFun();
          })
          .catch(() => {
            this.$message.error("删除失败");
          });
      }
      this.delVisibleByBatch = false; //关闭删除提示模态框
    },
    delAllCommitteeMember() {
      var lengths = this.committeeMemberMultipleSelection.length;

      for (let i = 0; i < lengths; i++) {
        this.api({
          url: "/committeeMember/deleteCommitteeMember",
          method: "post",
          data: this.committeeMemberMultipleSelection[i]
        })
          .then(() => {
            this.committeeMemberGeneralFun();
          })
          .catch(() => {
            this.$message.error("删除失败");
          });
      }
      this.delVisibleByBatch = false; //关闭删除提示模态框
    },

    // 确定删除
    deleteCommitteeRow() {
      // 写自己的删除的对象
      let committee = this.committeeList[this.delCommitteeIndex];
      this.api({
        url: "/committee/deleteCommittee",
        method: "post",
        data: committee
      })
        .then(() => {
          this.committeeGeneralFun();
        })
        .catch(error => {
          console.log(error);
          this.$message.error("删除失败");
        });
      this.delVisible = false; //关闭删除提示模态框
    },
    deleteMemberFromCommittee() {
      // 写自己的删除的对象
      console.log("this.delCommitteeMemberIndex:", this.delCommitteeMemberIndex);
      this.api({
        url: "/committeeMember/deleteMemberFromCommittee",
        method: "post",
        data: {
          "committee_member_id": this.committeeMemberList[this.delCommitteeMemberIndex].committee_member_id,
          "committee_id": this.currentCommitteeId
        }
      })
        .then(() => {
          this.committeeMemberGeneralFun();
        })
        .catch(error => {
          console.log(error);
          this.$message.error("删除失败");
        });
      this.delMemberFromCommitteeVisible = false; //关闭删除提示模态框
    },
    deleteCommitteeMemberRow() {
      // 写自己的删除的对象
      let committeeMember = this.committeeMemberList[this.delCommitteeMemberIndex];
      this.api({
        url: "/committeeMember/deleteCommitteeMember",
        method: "post",
        data: committeeMember
      })
        .then(() => {
          this.committeeMemberGeneralFun();
        })
        .catch(error => {
          console.log(error);
          this.$message.error("删除失败");
        });
      this.delVisible = false; //关闭删除提示模态框
    },
    delCommitteeSelect() {
      const length = this.committeeMultipleSelection.length;
      if (length == 0) {
        this.delWarnInfo();
      } else {
        this.delVisibleByBatch = true; //显示删除弹框
      }
    },
    delCommitteeMemberSelect() {
      const length = this.committeeMemberMultipleSelection.length;
      if (length == 0) {
        this.delWarnInfo();
      } else {
        this.delVisibleByBatch = true; //显示删除弹框
      }
    },
    handleCommitteeSelectionChange(val) {
      this.committeeMultipleSelection = val;
      console.log("committeeMultipleSelection: ", this.committeeMultipleSelection);
    },
    handleCommitteeMemberSelectionChange(val) {
      this.committeeMemberMultipleSelection = val;
      console.log("committeeMemberMultipleSelection: ", this.committeeMemberMultipleSelection);
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else if (rowIndex % 2 === 0) {
        // return 'success-row';
      }
      return "";
    },
    getCommitteeList() {
      //查询列表
      if (!this.hasPerm("committee:list")) {
        return;
      }
      this.committeeListLoading = true;
      this.api({
        url: "/committee/listCommittee",
        method: "get",
        params: this.committeeListQuery
      }).then(data => {
        console.log("getCommitteeList:", data);
        this.committeeListLoading = false;
        this.committeeList = data.list;
        this.committeeTotalCount = data.totalCount;
      });
    },
    getStaffList() {
        //获取员工列表
      if (this.hasPerm('user:list')) {
        this.api({
            url: "/user/list",
            method: "get"
          }).then(data => {
            this.staffList = data.list;
            this.querySearchStaffList = [];
            //提供给实时搜索
            for(var i = 0 ; i < data.list.length ; i++){
                let temp = [];
                temp['value'] = data.list[i]['certificateNumber']+'-'+data.list[i]['username'];
                temp['userId'] =  data.list[i]['userId'];
                temp['username'] =  data.list[i]['username'];
                temp['orgname'] =  "苏州吉玛基因有限公司";
                temp['certificateNumber'] =  data.list[i]['certificateNumber'];
                this.querySearchStaffList.push(temp);
            }
          })
      }
    },

    getAllCommitteeMemberList() {
      //获取全部成员列表，用于选择
      if (this.hasPerm('committee_member:list')) {
        this.api({
            url: "/committeeMember/listCommitteeMember",
            method: "get",
            params: {
              pageNum: 1, //页码
              pageRow: 100, //每页条数
            }
          }).then(data => {
            this.allCommitteeMemberList = data.list;
            this.querySearchCommitteeMemberList = [];
            //提供给实时搜索
            for(var i = 0 ; i < data.list.length ; i++){
                let temp = [];
                temp['value'] = data.list[i]['certificate_id']+'-'+data.list[i]['member_name'];
                temp['committee_member_id'] =  data.list[i]['committee_member_id'];
                temp['member_name'] =  data.list[i]['member_name'];
                temp['member_org'] =  data.list[i]['member_org'];
                temp['certificate_id'] =  data.list[i]['certificate_id'];
                this.querySearchCommitteeMemberList.push(temp);
            }
          })
      }
    },

    showMember(index, row){
      if (!this.hasPerm("committee_member:list")) {
        return;
      }
      this.committeeMemberListLoading = true;
      this.currentCommitteeName = row.committee_name; //显示在对话框中
      this.currentCommitteeId = row.committee_id;
      this.committeeMemberListQuery.committee_id = this.currentCommitteeId
      this.searchCommitteeMember = "";
      this.api({
        url: "/committeeMember/listCommitteeMemberByCommittee",
        method: "get",
        params: this.committeeMemberListQuery
      }).then(data => {
        console.log("listCommitteeMemberByCommittee:", data)
        this.committeeMemberListLoading = false;
        this.committeeMemberList = data.list;
        this.dialogStatus = "committeeMember";
        this.committeeMemberTotalCount = data.totalCount;
        this.dialogCommitteeMemberListVisible = true;
      })
    },
    getCommitteeMemberList() {
      //查询列表
      if (!this.hasPerm("committee_member:list")) {
        return;
      }
      this.committeeMemberListLoading = true;
      this.committeeMemberListQuery.committee_id = this.currentCommitteeId
      this.api({
        url: "/committeeMember/listCommitteeMemberByCommittee",
        method: "get",
        params: this.committeeMemberListQuery
      }).then(data => {
        this.committeeMemberListLoading = false;
        this.committeeMemberList = data.list;
        this.committeeMemberTotalCount = data.totalCount;
      });
    },

    getCommitteeListBySearch(val) {
      //查询列表
      if (!this.hasPerm("committee:list")) {
        return;
      }
      this.committeeListLoading = true;
      this.committeeListQuery.value = val;
      this.api({
        url: "/committee/listCommitteeBySearch",
        method: "get",
        params: this.committeeListQuery
      }).then(data => {
        this.committeeListLoading = false;
        this.committeeList = data.list;
        this.committeeTotalCount = data.totalCount;
      });
    },
    getCommitteeMemberListBySearch(val) {
      //查询列表
      if (!this.hasPerm("committee_member:list")) {
        return;
      }
      this.committeeMemberListLoading = true;
      this.committeeMemberListQuery.value = val;
      this.committeeMemberListQuery.committee_id = this.currentCommitteeId
      this.api({
        url: "/committeeMember/listCommitteeMemberByCommitteeAndSearch",
        method: "get",
        params: this.committeeMemberListQuery
      }).then(data => {
        this.committeeMemberListLoading = false;
        this.committeeMemberList = data.list;
        this.committeeMemberTotalCount = data.totalCount;
      });
    },

    handleSizeChange(val) {
      //改变每页数量
      this.committeeListQuery.pageRow = val;
      this.committeeGeneralFun();
    },
    handleCurrentChange(val) {
      //改变页码
      this.committeeListQuery.pageNum = val;
      this.committeeGeneralFun();
    },
    getIndex($index) {
      //表格序号
      return (this.committeeListQuery.pageNum - 1) * this.committeeListQuery.pageRow + $index + 1;
    },
    showCommitteeCreate() {
      //显示新增对话框
      this.tempCommittee.committee_name = "";
      this.tempCommittee.committee_desc = "";
      this.dialogStatus = "create";
      this.dialogVisible = true;
    },
    showCommitteeMemberCreate() {
      this.getStaffList();
      this.getAllCommitteeMemberList();
      this.tempCommitteeMember.committee_id = this.currentCommitteeId;
      this.tempCommitteeMember.member_name = null;
      this.tempCommitteeMember.member_org = null;
      this.tempCommitteeMember.is_staff = false;
      this.tempCommitteeMember.staff_id = null;
      this.tempCommitteeMember.is_chairman = false;
      this.tempCommitteeMember.certificate_id = null;
      this.dialogStatus = "create";
      this.dialogCommitteeMemberVisible = true;
    },
    showCommitteeUpdate($index) {
      //显示修改对话框
      //绑定相应的id
      this.tempCommittee.committee_id = this.committeeList[$index].committee_id;
      //绑定相应的内容
      this.tempCommittee.committee_name = this.committeeList[$index].committee_name;
      this.tempCommittee.committee_desc = this.committeeList[$index].committee_desc;
      this.dialogStatus = "update";
      this.dialogVisible = true;
    },
    showCommitteeMemberUpdate($index) {
      this.getStaffList();
      this.getAllCommitteeMemberList();
      this.tempCommitteeMember.committee_id = this.currentCommitteeId;
      this.tempCommitteeMember.committee_member_id = this.committeeMemberList[$index].committee_member_id;
      this.tempCommitteeMember.member_name = this.committeeMemberList[$index].member_name;
      this.tempCommitteeMember.member_org = this.committeeMemberList[$index].member_org;
      this.tempCommitteeMember.is_staff = this.committeeMemberList[$index].is_staff;
      this.tempCommitteeMember.staff_id = this.committeeMemberList[$index].staff_id;
      this.tempCommitteeMember.is_chairman = this.committeeMemberList[$index].is_chairman;
      this.tempCommitteeMember.certificate_id = this.committeeMemberList[$index].certificate_id;
      this.dialogStatus = "update";
      this.dialogVisible = true;
    },
    createCommittee() {
      this.api({
        url: "/committee/addCommittee",
        method: "post",
        data: this.tempCommittee
      }).then(() => {
        this.getCommitteeList();
        this.dialogVisible = false;
      });
    },
    createCommitteeMember() {
      let insertCommitteeMember = this.tempCommitteeMember;
      if (insertCommitteeMember.is_staff) {
        insertCommitteeMember.member_name = null;
        insertCommitteeMember.member_org = null;
        insertCommitteeMember.certificate_id = null;
      }
      this.api({
        url: "/committeeMember/addCommitteeMember",
        method: "post",
        data: insertCommitteeMember
      }).then(() => {
        this.getCommitteeMemberList();
        this.dialogCommitteeMemberVisible = false;
      });
    },
    updateCommittee() {
      this.api({
        url: "/committee/updateCommittee",
        method: "post",
        data: this.tempCommittee
      }).then(() => {
        this.getCommitteeList();
        this.dialogVisible = false;
      });
    },
    updateCommitteeMember() {
      this.api({
        url: "/committeeMember/updateCommitteeMember",
        method: "post",
        data: this.tempCommitteeMember
      }).then(() => {
        this.getCommitteeMemberList();
        this.dialogVisible = false;
      });
    },

    committeeGeneralFun() {
      if (this.searchCommittee) {
        this.getCommitteeListBySearch(this.searchCommittee);
      } else {
        this.getCommitteeList();
      }
    },
    committeeMemberGeneralFun() {
      if (this.searchCommitteeMember) {
        this.getCommitteeMemberListBySearch(this.searchCommitteeMember);
      } else {
        this.getCommitteeMemberList();
      }
    },

    //实时搜索输入的内容
    staffNameQuerySearch(queryString, cb) {
      let list = this.querySearchStaffList;
      var results = queryString ? list.filter(this.createFilter(queryString)) : list;
      cb(results);
    },
    committeeMemberNameQuerySearch(queryString, cb) {
      var list = this.querySearchCommitteeMemberList;
      var results = queryString ? list.filter(this.createFilter(queryString)) : list;
      cb(results);
    },
    createFilter(queryString) {
      return (staff) => {
        return (staff.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
      };
    },
    handleStaffSelect(item) {
      this.tempCommitteeMember.committee_member_id = null;
      this.tempCommitteeMember.staff_id = item.userId;
      this.tempCommitteeMember.member_name = item.username;
      this.tempCommitteeMember.member_org = item.orgname;
      this.tempCommitteeMember.certificate_id = item.certificateNumber;
      this.committeeMemberOrgDisabled = true;
      this.committeeMemberCertifyDisabled = true;
    },
    handleCommitteeMemberSelect(item) {
      this.tempCommitteeMember.committee_member_id = item.committee_member_id;
      this.tempCommitteeMember.staff_id = null;
      this.tempCommitteeMember.member_name = item.member_name;
      this.tempCommitteeMember.member_org = item.member_org;
      this.tempCommitteeMember.certificate_id = item.certificate_id;
      this.committeeMemberOrgDisabled = true;
      this.committeeMemberCertifyDisabled = true;
    },
    handleKeyup() {
      this.tempCommitteeMember.committee_member_id = null;
      this.tempCommitteeMember.staff_id = null;
      this.tempCommitteeMember.member_org = null;
      this.tempCommitteeMember.certificate_id = null;
      this.committeeMemberOrgDisabled = this.tempCommitteeMember.is_staff;
      this.committeeMemberCertifyDisabled = this.tempCommitteeMember.is_staff;
    },
    handleIsStaffChanged(is_staff) {
      this.tempCommitteeMember.committee_member_id = null;
      this.tempCommitteeMember.staff_id = null;
      this.tempCommitteeMember.member_name = null;
      this.tempCommitteeMember.member_org = null;
      this.tempCommitteeMember.certificate_id = null;
      this.tempCommitteeMember.is_chairman = false;
      this.committeeMemberOrgDisabled = is_staff;
      this.committeeMemberCertifyDisabled = is_staff;
    },

  }
};
</script>


<style>
.el-table .warning-row {
  background: whitesmoke;

  /* background: #ffffff; */
}

.el-table .success-row {
  background: #f0f9eb;
}

.pagination {
  background-color: lavender;
  margin-right: 0%;
  text-align: right;
}

.searchWord .add1 {
  display: inline;
}

#btn {
  /* padding: 5px 10px;
            background: #00b0f0;
            color: #FFF;
            border: none;
            border-radius: 5px; */
}
</style>